<template>
	<div class="per-main">
		<div class="per-header">
			<a href="javascript:history.go(-1);" class="back"></a>
			<div class="header-con">
				<img v-bind:src="photo" class="photo">
				<span class="name">{{username}}</span>
				<span v-bind:class="[gender ? 'man' : 'woman', 'gender']"></span>
			</div>
		</div>
		<div class="per-con">
			<div class="img-list">
				<a v-for="item in items" href="#" class="img-item"><img v-bind:src="item.url"></a>
			</div>
			<div class="per-detail">
				<dl class="deta-item">
					<dt><i class="name"></i></dt>
					<dd>
						<input type="text" v-model="nickname" placeholder="别名" v-on:change="isChange">
					</dd>
				</dl>
				<dl class="deta-item">
					<dt><i class="birthday"></i></dt>
					<dd>		
						<input type="text" placeholder="出生日期" v-model="birthday" v-on:focus="open()">		
						<mt-datetime-picker ref="datepicker" type="date" @confirm="handleConfirm">
						</mt-datetime-picker>						
					</dd>
				</dl>
				<dl class="deta-item">				
					<dt><i class="phone"></i></dt>
					<dd>
						<input type="text" v-model="phone" placeholder="手机号码" v-on:change="isChange">
					</dd>
				</dl>
				<dl class="deta-item">								
					<dt><i class="address"></i></dt>
					<dd>
						<input type="text" v-model="address" placeholder="所在地" v-on:change="isChange">
					</dd>
				</dl>
				<dl class="deta-item">							
					<dt><i class="profession"></i></dt>
					<dd>
						<input type="text" v-model="profession" placeholder="职业" v-on:change="isChange">
					</dd>	
				</dl>
				<dl class="deta-item">							
					<dt><i class="signature"></i></dt>
					<dd>
						<textarea v-model="signature" placeholder="签名" v-on:change="isChange"></textarea>
					</dd>														
				</dl>
			</div>			
		</div>
		<a href="javascript:;" v-bind:class="[isActive ? '' : 'disabled', 'per-edit']" v-on:click="submit"><i></i>修改资料</a>
	</div>
</template>
<script>
import Vue from 'vue'
import MessageBox from 'mint-ui/lib/message-box'
import 'mint-ui/lib/message-box/style.css'
import DatetimePicker from 'mint-ui/lib/datetime-picker'
import 'mint-ui/lib/datetime-picker/style.css'
import VueResource from '../assets/js/vue-resource'
Vue.use(VueResource)
Vue.component(DatetimePicker.name, DatetimePicker);

export default {
	name: 'app',
	data () {
		return {
			items: [{url: ''}],
			photo: '',
			username: '',
			nickname: '',
			birthday: '',
			phone: '',
			address: '',
			profession: '',
			signature: '',
			gender: '',
			page: 1,
			isActive : false
		}
	},

	methods : {
		open () {
	        this.$refs.datepicker.open();
	    },		

	    handleConfirm (val) {
	    	this.birthday = new Date(val).Format("yyyy-MM-dd");
	    	this.isActive = true;
	    },

		isChange () {
			this.isActive = true;
		},

		submit () {
			if(this.isActive) {
				this.$http.post('/laravel/public/personal', {
					nickname : this.nickname,
					birthday : this.birthday,
					phone : this.phone,
					address : this.address,
					gender : this.gender,
					profession : this.profession,
					signature : this.signature,      		
	      		}).then(response => {
					MessageBox('提示', response.body.msg);	

					// if(response.body.status == "error") {
					// 	this.$router.push('/login')
					// }
				}, response => {
					MessageBox('提示', response.body.msg);
				})	
			}		
		}
	},

	created () {
      	this.$http.get('/laravel/public/personal').then(response => {
			if(response.body.status == "success") {
				let data =response.body.data;
				this.items = data.pic;
				this.photo = data[0].photo ? data[0].photo : "http://ogrv04tc4.bkt.clouddn.com/2016-11-17_582d48713a980.jpg";
				this.username = data[0].username;
				this.nickname = data[0].nickname;
				this.birthday = data[0].birthday ? data[0].birthday : "2006-09-09";
				this.phone = data[0].phone;
				this.address = data[0].address;
				this.gender = data[0].gender;
				this.profession = data[0].profession;
				this.signature = data[0].signature;
			}
		}, response => {
			MessageBox('提示', response.body.msg);
		})
    },	
}
</script>
<style lang="scss">
.per-main{
	.per-header {
		height: 9.85rem;
		width: 100%;
		background: -webkit-linear-gradient(left, #7bcacc 0%, #49a1a7 100%);
		background: -o-linear-gradient(left, #7bcacc 0%, #49a1a7 100%);
		background: linear-gradient(left, #7bcacc 0%, #49a1a7 100%);	

		.back {
			position: absolute;
			display: block;
			left: 0.55rem;
			top: 0.65rem;
			width: 0.425rem;
			height: 0.75rem;
			background: url(../assets/image/back.png) no-repeat center center /cover;
		}		

		.header-con {
			position: absolute;
			left: 0;
			right: 0;					
			top: 2.35rem;	
			margin: auto;	
			width: 5.625rem;
			height: 3.625rem;	
			text-align: center;						
		}	

		.photo {
			margin-bottom:  1rem;
			width: 3.625rem;
			height: 3.625rem;
		}

		.name {
			text-align: center;
			line-height: 1;
			font-size: .75rem;
			color: #fff;
		}
		
		.gender {
			display: inline-block;
			width: 0.6rem;
			height: 0.6rem;				
		}

		.gender.man {				
			background: url(../assets/image/man.png) no-repeat center center /contain;
		}

		.gender.woman {
			background: url(../assets/image/woman.png) no-repeat center center /contain;
		}			
		

	}	

	.per-con {
		margin: 0 auto;
		width: 14.925rem;
		
		.img-list {
			margin: 0.25rem 0;
		}

		.img-item {
			display: inline-block;
			margin: 0 0.225rem 0 0;
			width: 3.55rem;
			height: 3.175rem;
			overflow: hidden;

			img{
				width: 100%;
				height: 100%;
			}

			&:nth-child(4) {
				margin-right: 0;
				position: relative;

				&:before {
					display: block;
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;				
					background: rgba(0, 0, 0, .5);		
				}

				&:after {
					display: block;
					content: '...';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					margin: auto;
					z-index: 2;
					width: 0.85rem;
					height: 0.2rem;
					font-size: 1rem;
					color: #fff;
					line-height: 0;
				}
			}
		}
		
		.deta-item {
			box-sizing: content-box;
			border-bottom: 1px solid #ddd;

			&:last-child dt{
				padding-top: 0.225rem;
				vertical-align: top;
			}

			dt {
				display: inline-block;
				margin-right: 0.725rem;
				width: 0.975rem;
				vertical-align: middle;
				text-align: center;

				i {
					display: block;
					vertical-align: middle;
					margin: 0 auto;
					background-size: contain;
					background-position: center center;
					background-repeat: no-repeat;

					&.name {
						width: 0.775rem;
						height: 0.775rem;
						background-image: url(../assets/image/name.png);
					}
					&.birthday {
						width: 0.825rem;
						height: 0.85rem;
						background-image: url(../assets/image/birth.png);
					}
					&.phone {
						width: 0.7rem;
						height: 0.7rem;
						background-image: url(../assets/image/phone.png);
					}					
					&.address {						
						width: 0.475rem;
						height: 0.725rem;						
						background-image: url(../assets/image/address.png);
					}					
					&.profession {
						width: 0.725rem;
						height: 0.675rem;
						background-image: url(../assets/image/zhi.png);
					}
					&.signature {
						vertical-align: top;
						width: 0.725rem;
						height: 0.725rem;
						background-image: url(../assets/image/qian.png);
					}					

				}
			}
			
			dd {
				display: inline-block;
				vertical-align: middle;

				input {
					height: 1.35rem;
					width: 9.4rem;
					border: none;
					outline: none;
					color: #333;
					font-size: 0.6rem;
				}

				textarea {
					padding-top: 0.225rem;
					width: 9.4rem;
					height: 2.425rem;
					font-size: 0.6rem;
					border: none;
					outline: none;
					color: #333;
					resize: none;
				}
			}
		}
	}

	.per-edit {
		position: fixed;
		width: 16rem;
		max-width: 640px;
		bottom: 0;
	    right: 0;
	    left: 0;
	    margin: auto;
		display: block;
		height: 2.0rem;
		line-height: 2.0rem;
		font-size: 0.75rem;
		color: #fff;
		background: #6ad2d3;
		text-align: center;

		i {
			display: inline-block;
			margin-right: 0.525rem;
			vertical-align: middle;
			width: 0.925rem;
			height: 0.95rem;
			background: url(../assets/image/edit.png) no-repeat center center /contain;
		}

		&.disabled{
			background: #ababab;
		}
	}	
}
</style>